<template>
  <div>
    <template>
      <div>
        <h1>
          <span style="text-align: center; font-size: 30px">
            {{ thisData.articlesTitle }}
          </span>
          <div style="float: right">
            <el-badge :value="likevalue" class="item">
              <el-button
                size="big"
                @click="like"
                v-if="this.statusLike == false"
                >点赞👍</el-button
              >
              <el-button size="big" v-else>已点赞👍</el-button>
            </el-badge>

            <el-button
              @click="dialogFormVisible = true"
              style="margin-left: 30px"
              >你有话说</el-button
            >
          </div>
        </h1>
        <span v-html="thisData.articlesContent">
          {{ thisData.articlesContent }}
        </span>
        <br />
        <br />
      </div>
    </template>
    <!-- 评论内容 -->
    <h2>评论</h2>
    <div v-for="item in this.thisCommentData" :key="item.id">
      <span>{{ item.username }} 说：{{ item.comment }} </span
      ><a>                                            ----  {{ item.createTime }}</a>
      <br />
      <br />
    </div>
    <!-- 评论所需的模态框 -->
    <el-dialog :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="评论内容" label-width="100px">
          <el-input
            type="textarea"
            autosize
            placeholder="请输入内容"
            v-model="textarea1"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="pushComment">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  GetArticleById,
  PostArticleLike,
  GetArticleLike,
  GetArticleComment,
  PostArticleComment,
} from "../api/articles";
import { getUserId } from "../Utils/auth";

export default {
  data() {
    return {
      textarea1: "",
      dialogFormVisible: false,
      form: {
        commentContent: "",
      },
      nowId: "",
      thisData: [],
      thisCommentData: [],
      likeId: {
        FromUsersId: 0,
        FromArticlesId: 0,
      },
      likevalue: 33,
      statusLike: "",
      commentContent: {
        FromUsersId: 0,
        FromArticlesId: 0,
        ArticleCommentsContent: "",
      },
    };
  },
  created() {
    // console.log("this.$router.query.id");
    // console.log(this.$route.query.id);
    this.nowId = this.$route.query.id;
    // 界面构建时开始获取url里携带的参数
    //获取一些值
    this.likeId.FromUsersId = getUserId() * 1;
    this.likeId.FromArticlesId = this.nowId * 1;
    this.commentContent.FromUsersId = getUserId() * 1;
    this.commentContent.FromArticlesId = this.nowId * 1;
  },
  methods: {
    like() {
      PostArticleLike(this.likeId).then(({ data }) => {
        // console.log(data);
        if (data.code === 1000) {
          this.$message({ type: "success", message: "点赞成功!" });
          this.statusLike = true;
          this.likevalue++;
        }
      });
    },
    pushComment() {
      this.form.commentContent = this.textarea1;
      this.commentContent.ArticleCommentsContent = this.form.commentContent;
      PostArticleComment(this.commentContent).then(({ data }) => {
          this.$message({ type: "success", message: data.msg });

        GetArticleComment(this.likeId.FromArticlesId).then(({ data }) => {

          this.thisCommentData = data.data;
          // console.log(this.thisCommentData);
        });
      });
      this.dialogFormVisible = false;
    },
  },
  mounted() {
    GetArticleById(this.nowId).then(({ data }) => {
      // console.log(data);
      this.likevalue = data.likeSum;
      this.thisData = data.data;
      // console.log(this.thisData);
    });
    GetArticleLike(this.likeId.FromUsersId, this.likeId.FromArticlesId).then(
      ({ data }) => {
        // console.log("aaa");
        // console.log(data);
        if (data.code === 1000) {
          this.statusLike = true;
        } else {
          this.statusLike = false;
        }
      }
    );
    GetArticleComment(this.likeId.FromArticlesId).then(({ data }) => {
      console.log("1");
      console.log(data);
      this.thisCommentData = data.data;
      // console.log(this.thisCommentData);
    });
  },
};
</script>

<style  scoped>
h1 {
  text-align: center;
  font-size: 30px;
}
span {
  font-size: 18px;
}
</style>